import type {ComponentConfig} from "@/lib/types"

export function generateLayoutComponent(config: ComponentConfig): string {
    const {name, description, features} = config

    // 检查是否启用了特定功能
    const hasResponsive = features.some((f) => f.id === "responsive" && f.enabled)
    const hasDarkMode = features.some((f) => f.id === "darkMode" && f.enabled)

    return `<script setup lang="ts">
import { ref } from 'vue';

/**
 * ${description || `${name} 布局组件`}
 */
interface Props {
  title?: string;
  showSidebar?: boolean;
  ${hasDarkMode ? "darkMode?: boolean;" : ""}
}

const props = withDefaults(defineProps<Props>(), {
  title: '页面标题',
  showSidebar: true,
  ${hasDarkMode ? "darkMode: false" : ""}
});

${
        hasResponsive
            ? `const isMobileMenuOpen = ref(false);

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
};`
            : ""
    }
</script>

<template>
  <div class="min-h-screen ${hasDarkMode ? "transition-colors duration-200" : ""}" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900'" : "'bg-gray-100'"}">
    <!-- 顶部导航栏 -->
    <header class="shadow-sm" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-800' : 'bg-white'" : "'bg-white'"}">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold" :class="${hasDarkMode ? "props.darkMode ? 'text-white' : 'text-gray-900'" : "'text-gray-900'"}">{{ title }}</h1>
          </div>
          <div class="flex items-center">
            ${
        hasResponsive
            ? `<button 
              class="md:hidden p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100"
              :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:text-white hover:bg-gray-700' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" : ""}"
              @click="toggleMobileMenu"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>`
            : ""
    }
            <button class="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100" :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:text-white hover:bg-gray-700' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'" : ""}">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            <button class="ml-3 p-2 rounded-full" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-700' : 'bg-gray-200'" : "'bg-gray-200'"}">
              <span class="sr-only">用户头像</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300' : 'text-gray-700'" : "'text-gray-700'"}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </header>
    
    <div class="flex">
      <!-- 侧边栏 -->
      <aside v-if="showSidebar" class="hidden md:block w-64 shadow-md" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-800' : 'bg-white'" : "'bg-white'"}">
        <nav class="mt-5 px-2">
          <a href="#" class="group flex items-center px-2 py-2 text-base font-medium rounded-md" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-900 text-white' : 'bg-primary/10 text-primary'" : "'bg-primary/10 text-primary'"}">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            首页
          </a>
          <a href="#" class="mt-1 group flex items-center px-2 py-2 text-base font-medium rounded-md" :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:bg-gray-700 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"}">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            统计
          </a>
        </nav>
      </aside>
      
      ${
        hasResponsive
            ? `<!-- 移动端菜单 -->
      <div v-if="isMobileMenuOpen" class="md:hidden fixed inset-0 z-40 flex">
        <div class="fixed inset-0 bg-gray-600 bg-opacity-75" @click="toggleMobileMenu"></div>
        <div class="relative flex-1 flex flex-col max-w-xs w-full" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-800' : 'bg-white'" : "'bg-white'"}">
          <div class="absolute top-0 right-0 -mr-12 pt-2">
            <button 
              class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
              @click="toggleMobileMenu"
            >
              <span class="sr-only">关闭侧边栏</span>
              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
            <nav class="mt-5 px-2 space-y-1">
              <a href="#" class="group flex items-center px-2 py-2 text-base font-medium rounded-md" :class="${hasDarkMode ? "props.darkMode ? 'bg-gray-900 text-white' : 'bg-primary/10 text-primary'" : "'bg-primary/10 text-primary'"}">
                <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                首页
              </a>
              <a href="#" class="group flex items-center px-2 py-2 text-base font-medium rounded-md" :class="${hasDarkMode ? "props.darkMode ? 'text-gray-300 hover:bg-gray-700 hover:text-white' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'" : "'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"}">
                <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                统计
              </a>
            </nav>
          </div>
        </div>
      </div>`
            : ""
    }
      
      <!-- 主内容区 -->
      <main class="${hasResponsive ? "md:pl-64 " : ""}flex-1 p-6">
        <div class="max-w-7xl mx-auto">
          <slot></slot>
        </div>
      </main>
    </div>
  </div>
</template>`
}
